import Vue from 'vue'

const FlyConstructor = Vue.extend(require('./fly.vue'))

const Fly = (options = {}) => {
  const instance = new FlyConstructor({
    el: document.createElement('div')
  })
  instance.$el.addEventListener('transitionend', function () {
    const el = instance.$el
    el.parentNode && el.parentNode.removeChild(el)
  }, false)
  instance.current = options.current
  const clientRect = instance.current.target.getBoundingClientRect()
  instance.$el.style.left = `${clientRect.left + clientRect.width / 2}px`
  instance.$el.style.top = clientRect.top + 'px'
  document.body.appendChild(instance.$el)
  setTimeout(() => {
    instance.translateX = 30 * window.dpr - (clientRect.left + clientRect.width / 2)
    instance.translateY = screen.height * window.dpr - clientRect.top
  }, 5)
}
export default Fly
